<template>
	<view>
		 <uni-nav-bar statusBar="true"
		 :fixed="true" :border="false" 
		 backgroundColor="#eff3f7">
		 	<view class="index-top-nav-title" slot="middle">
		 		<view class="leftIcon" @tap.stop="back">
		 			<i class="icon iconfont icon-arrow-left"></i>
		 		</view>
		 		<view class="index-top-nav-title-content">
		 			<!-- {{i18n.orderDetails}} -->
		 					{{i18n.orderDetails}}
		 		</view>
		 		<view class="rightIcon">
		 		</view>
		 	</view> 
		 </uni-nav-bar>
		 
		<view class="content">
			<view class="detail-title">
				{{i18n.PackageName}} {{curObj.title}} 
				<!-- <image src="../../static/imgs/status01.png" mode="widthFix" lazy-load></image> -->
				<image src="../../static/imgs/status02.png" mode="widthFix" lazy-load></image>
			</view>
			
			<view class="detail-item">
				<view class="detail-item-title">
					{{i18n.orderInformation}}
				</view>
				<view class="detail-item-item">
					<view class="item">
						<view>{{i18n.OrderType}}</view>
						<text>{{curObj.title}}</text>
					</view>
				<!-- 	<view class="item">
						<view>挖矿类型</view>
						<text>定期挖矿</text>
					</view> -->
					<view class="item">
						<view>{{i18n.theTerm}}</view>
						<text>{{curObj.day}}{{i18n.day}}</text>
					</view>
				<!-- 	<view class="item">
						<view>建设基金</view>
						<text>投入基金</text>
					</view> -->
					<view class="item">
						<view>{{i18n.ProducedCoins}}</view>
						<text>{{curObj.total}} Block</text>
					</view>
					<view class="item">
						<view>{{i18n.RevenueDays}}</view>
						<text>{{curObj.all_day}}</text>
					</view>
					<view class="item">
						<view>{{i18n.buy_mon}}</view>
						<text>{{curObj.token_num}}</text>
					</view>
					<view class="item">
						<view>{{i18n.buy_time}}</view>
						<text>{{curObj.time}}</text>
					</view>
				<!-- 	<view class="item">
						<view>矿池分红</view>
						<text>2.86%</text>
					</view> -->
				</view>
			</view>
		</view>
		<view class="over-btn" @tap.stop="showPopver" v-if="curObj.status">
			{{i18n.stopFund}}
		</view>
		<view class="popver" v-if="popoverShow" @tap.stop="showPopver">
			<view class="popver-content"  @tap.stop="">
				<view class="iconfont icon-cha" @tap.stop="showPopver"></view>
				<view class="conten">
					<text>{{i18n.paypwds}}</text>
					<input type="text" password value=""  :placeholder="i18n.p_enter_paddword" maxlength="6" v-model="paypwd"/>
					<view class="submit-btn" @tap.stop="over">
						{{i18n.stop}}
					</view>
				</view>
				
			</view>
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from '../../components/uni-icon/uni-icon.vue';
	import Load from '../../components/common/load.vue';
	import Toast from '@/components/toast/toast.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,
			uniIcon,
			Load,
			Toast
		},
		data() {
			return {
				popoverShow:false,
				showLoad: false,
				curObj:{},
				paypwd:''
			}
		},
		onLoad(e){
			this.curObj = JSON.parse(e.item)
			console.log(JSON.parse(e.item));
		},
		methods:{
			showPopver(){
				this.popoverShow = !this.popoverShow
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			over(){
				if(this.paypwd==''&&!this.paypwd){
					showToast(this.i18n.p_enter_paddword)
					return
				}
				let url = this.getRequestUrl + '/api/shop/over'
				let data = {
					id: this.getLoginInfo.id,
					token: this.getLoginInfo.token,
					shopid: this.curObj.id,
					paypwd: this.paypwd
				}
				this.showLoad = true;
				fetch(url,data,"POST").then(res=>{
					showToast(res.data.msg)
					this.showLoad = false;
					if(res.data.code){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				}).catch(err=>{
					this.showLoad = false;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		font-size: 36upx;
		text-align: center;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.leftIcon{
			width: 80upx;
		}
		.rightIcon{
			width: 80upx;
		}
		.index-top-nav-title-content{
			flex: 1;
		}
	}
	.popver{
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,.65);
		z-index: 9;
		.popver-content{
			padding: 60upx 30upx;
			position: relative;
			background-color: #FFFFFF;
			width: 480upx;
			margin: 0 auto;
			border-radius: 16upx;
			margin-top:50%;
			transform: translateY(-50%);
			.icon-cha{
				position: absolute;
				color: #B9B9B9;
				right: 20upx;
				top: 20upx;
			}
			.conten{
				text{
					font-size: 24upx;
					color:#535353 ;
				}
				input{
					line-height: 80upx;
					height: 80upx;
					padding-left: 20upx;
					border-bottom: 1upx solid #d5d5d5;
				}
				.submit-btn{
					width: 250upx;
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					background-color: #ff242f;
					color: #FFFFFF;
					border-radius: 10upx;
					margin: 0 auto;
					margin-top: 50upx;
				}
			}
		}
	}
	.content{
		.detail-title{
			font-size:24upx;
			color: #1f1f1f;
			line-height: 91upx;
			padding:19upx 34upx 11upx 29upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 20upx solid #efefef;
			image{
				flex-shrink: 0;
				width: 90upx;
				height: 91upx;
			}
		}
		.detail-item{
			padding:40upx 24upx 42upx;
			// border-bottom: 20upx solid #efefef;
			.detail-item-title{
				font-size:24upx;
				color: #000000;
				position: relative;
				padding-left: 26upx;
				font-weight: bold;
				margin-bottom: 18upxs;
				&::before{
					content: '';
					position: absolute;
					width: 4upx;
					height: 20upx;
					background-color:#1D7DFF;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.detail-num{
				flex: flex;
				align-items: center;
				font-size:45upx;
				color: #2f2f2f;
				padding:20upx 0 20upx  26upx;
				text{
					margin-left: 10upx;
					font-size: 24upx;
					font-weight: bold;
				}
			}
			.detail-item-item{
				padding-left: 26upx;
				.item{
					padding:18upx 0;
					display: flex;
					align-items: center;
					view{
						width: 98upx;
						font-size:24upx ;
						color: #5E5E5E;
						margin-right: 30upx;
					}
					text{
						flex: 1;
						font-size:28upx;
						color: #2E2E2E;
					}
				}
			}
		}
	}
	.over-btn{
		width: 350upx;
		height: 80upx;
		line-height: 80upx;
		background-color: #FF242F;
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		margin:0 auto;
		border-radius: 16upx;
	}
</style>
